<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-06-21 22:26:09
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-06-24 22:32:56
 * @FilePath: \shangyitong\src\pages\hospital\register\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
	<div class="register">
		<div class="top">
			<div class="title">
				{{ hospitalDetailStore.hospitalDetail.hospital?.hosname }}
			</div>
			<div class="level">
				<span class="iconfont icon-icon"></span>
				<span>{{
					hospitalDetailStore.hospitalDetail.hospital?.param
						.hostypeString
				}}</span>
			</div>
		</div>
		<div class="content">
			<div class="left">
				<img
					:src="`data:image/jpeg;base64,${hospitalDetailStore.hospitalDetail.hospital?.logoData}`"
					alt=""
				/>
			</div>
			<div class="right">
				<div>挂号规则</div>
				<div class="time">
					预约周期:{{
						hospitalDetailStore.hospitalDetail.bookingRule?.cycle
					}}天 放号时间:{{
						hospitalDetailStore.hospitalDetail.bookingRule
							?.releaseTime
					}},停挂时间:{{
						hospitalDetailStore.hospitalDetail.bookingRule?.stopTime
					}}
				</div>
				<div class="address">
					<div>
						具体地址:{{
							hospitalDetailStore.hospitalDetail.hospital?.param
								.fullAddress
						}}
					</div>
				</div>
				<div class="route">
					<div>
						乘车路线:{{
							hospitalDetailStore.hospitalDetail.hospital?.route
						}}
					</div>
				</div>
				<div class="releasetTime">
					<div>
						退号时间:就诊前一个工作日{{
							hospitalDetailStore.hospitalDetail.bookingRule
								?.quitTime
						}}前取消
					</div>
				</div>
				<div class="rule">
					<div>医院预约规则</div>
					<div
						class="ruleInfo"
						v-for="item in hospitalDetailStore.hospitalDetail
							.bookingRule?.rule"
					>
						{{ item }}
					</div>
				</div>
			</div>
		</div>
		<!--  展示每一个人科室的数据-->
		<div class="department">
			<div class="leftNav">
				<ul>
					<li
						v-for="(
							item, index
						) in hospitalDetailStore.deparmentArr"
						:key="index"
						:class="{ active: index == currentIndex }"
						@click="selectIndex(index)"
					>
						{{ item.depname }}
					</li>
				</ul>
			</div>
			<div class="departmentInfo">
				<!-- 展示大科室与小科室(诊室) -->
				<div
					class="showDepartment"
					v-for="(
						deparment, index
					) in hospitalDetailStore.deparmentArr"
					:key="index"
				>
					<h1 class="cur">{{ deparment.depname }}</h1>
					<!--  每一的大科室下的小科室(诊室)-->
					<ul>
						<li @click="showLogin(item)"
							v-for="(item, index) in deparment.children"
							:key="index"
						>
							{{ item.depname }}
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter,useRoute } from 'vue-router'
let $router = useRouter();
let $route = useRoute();
import useDetailStore from '@/store/modules/hospitalDetail'
//引入医院的详情的数据仓库
let hospitalDetailStore = useDetailStore()

//点击科室事件回调
//item即用户选择的科室数据
const showLogin = (item:any)=>{
//点击某一个医院的详情按钮,进入到相应的预约挂号详情页面
//跳转到预约挂号详情页面并传参
$router.push({
    path:"/hospital/register_step1",
    query:{
        hoscode:$route.query.hoscode,
        depcode:item.depcode
    }
})
    
}
//控制科室高亮的的响应式数据
let currentIndex = ref(0)
const selectIndex = (value: number) => {
	currentIndex.value = value
	let allH1 = document.querySelectorAll('.cur')
	console.log('allH1', allH1)
    //scrollIntoView() 方法可以将滚动元素到可视区域
	allH1[currentIndex.value].scrollIntoView({
        //smooth 平滑匀速 滚动
        behavior:"smooth",
        block:"start"
    })
}
onMounted(() => {})
</script>

<style lang="scss" scoped>
.register {
	.top {
		display: flex;
		.title {
			font-size: 30px;
			font-weight: 300;
		}
		.level {
			color: #7f7f7f;
			margin-left: 10px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			span {
				margin-left: 5px;
			}
		}
	}
	.content {
		display: flex;
		margin: 20px 0 0 0;
		.left {
			width: 80px;
			img {
				width: 80px;
				height: 80px;
				border-radius: 50%;
			}
		}
		.right {
			flex: 1;
			font-size: 14px;
			margin-left: 10px;
			.time,
			.address,
			.route,
			.releasetTime,
			.ruleInfo {
				margin: 10px 0 0 0;
				color: #7f7f7f;
			}
		}
	}
	.department {
		width: 100%;
		height: 500px;
		display: flex;
		margin: 20px 0 0 0;
		.leftNav {
			width: 80px;
			height: 100%;
			background-color: #f8f8f8;
			ul {
				height: 100%;
				display: flex;
				flex-direction: column;
				li {
					flex: 1;
					width: 100%;
					line-height: 39px;
					text-align: center;
					cursor: pointer;
					&.active {
						border-left: 1px solid red;
						color: red;
						background-color: white;
					}
				}
			}
		}
		.departmentInfo {
			flex: 1;
			margin-left: 20px;
			overflow: auto;
			&::-webkit-scrollbar {
				display: none;
			}
			.showDepartment {
				h1 {
					width: 100%;
					height: 29px;
					background-color: rgb(248, 248, 248);
					line-height: 29px;
					margin-bottom: 5px;
				}
				ul {
					display: flex;
					flex-wrap: wrap;
					li {
						width: 30%;
						color: #7f7f7f;
						line-height: 20px;
                        cursor: pointer;
					}
				}
			}
		}
	}
}
</style>
